body {
    background-color: transparent !important;
}

.template, .notification {
    display: none;
}

@media (min-width: 1920px) {
    .notif-container {
        width: 20%;
        position: absolute;
        right: 15%;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
    }

    .notification {
        margin:6px;
        font: caption;
        padding:8px;
        border-bottom: 3px solid rgba(0, 0, 0, 0.3);
        border-right: 2px solid rgba(0, 0, 0, 0.3);
        border-radius:4.2px;
        font-weight:bold;
        font-size:12px;
        display:inline-block;
    }
  
    .success {
        background: rgba(8, 172, 71, 0.867);
        color: #fff;
    }
    
    .primary {
        background-color: rgba(45, 97, 143, 0.867);
        color: #ffffff;
    }
    
    .error {
        background: rgba(216, 23, 23, 0.867);
        color: #fff;
    }
}

@media (min-width: 2560px) {
    .notif-container {
        width: 20%;
        position: absolute;
        right: 15%;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
    }

    .notification {
        margin: 18px;
        font: caption;
        padding:14px;
        border-bottom: 3px solid rgba(0, 0, 0, 0.3);
        border-right: 2px solid rgba(0, 0, 0, 0.3);
        border-radius:4.2px;
        font-weight:bold;
        font-size:12px;
        display:inline-block;
    }
  
    .success {
        background: rgba(35, 190, 151, 0.867);
        color: #fff;
    }
    
    .primary {
        background-color: rgba(45, 97, 143, 0.867);
        color: #ffffff;
    }
    
    .error {
        background: rgba(156, 56, 62, 0.867);
        color: #fff;
    }
}